<template>
   <div v-if="ArticleHotData && ArticleHotData.data?.length>0" >
       <div id="Title" class="flex"> 
         <div class="flex"><img src="@/assets/function/风车.png"> 热门文章</div>
       </div>
       <div id="HotBack" class="flex">
          <button v-for="(item,index) in  ArticleHotData.data" :key="item.articleid" class="HotOne flex" @click="ToArticleDetail(item)">
            <div class="number">{{index+1}}</div>
            <div class="overflow" id="content">{{item.title}}</div>
            <div class="hot flex">{{item.hot | count('hot')}}</div>
          </button>
       </div>
        <div class="time">更新于 {{ArticleHotData.updateTime|time}}</div>
   </div>
</template>
<script>
import{mapState,mapActions,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Init',['ArticleHotData'])
     },
     methods:{
        ...mapActions('Init',['getArticleHotData']),
        ...mapActions('Search',['search']),
        ...mapMutations('Search',['SEARCHDOWN']),
         ToArticleDetail(item){
            this.search(item.title)
            this.$router.push({path:'/articleDetail', query: {id:item.id} })
            this.SEARCHDOWN()
         }
     },
  }
</script>
<style scoped lang='less'>
#Title{
  width: 100%;
  justify-content: space-between;
  font-size: 20px;
  position: relative;
  color: var(--fontColor);

  img{
     width:20px ;
     height: 20px;
     animation: rotate 4s linear infinite;
     margin-right: 5px;
  }
}
.time{
    margin-top: 5px;
    width: 100%;
    text-align: right;
    font-size:15px;
    color: var(--TimeColor);
 }

#HotBack{
  width: 100%;
  justify-content: space-between;
}
.HotOne{
    width: 45%;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    flex-wrap: nowrap;
    justify-content: flex-start;
      color: var(--fontColor);
    #content{
     font-size: 18px;
     width: calc(100% - 25px - 35px);
     text-align: left;
     margin-left: 5px;
   }

   .number{
      color: white;
      width: 25px;height: 25px;
      text-align: center;line-height: 25px;
      border-radius: 50%;
      background: #AFB5C5;
      background: rgba(0, 0, 0, 0.5);
   }
   .hot{
      width: 30px;height: 30px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      color: white;
   }
}
.HotOne:nth-child(1){
  color: orangered;
  .number{ background: red;}
}
// .HotOne:nth-child(2){
//    color: orangered;
//   .number{ background: #FE9C18;}
// }
// .HotOne:nth-child(3){
//    color: orangered;
//   .number{ background: orangered;}
// }
.HotOne:hover{
  color: var(--GeneralBackColor);
  font-weight: 600;
}
</style>